<template>
  <div style="margin: 20px">

    <!-- tab -->
    <tab v-if="tableProperties.tabs" :tabs="tableProperties.tabs" @getTabsName="getTabsName"/>

    <!-- search -->
    <search-input v-if="tableProperties.search" :search="tableProperties.search" @getSerachInputParam="getSerachInputParam"/>

    <!-- 表格上方but -->
    <table-operation-but v-if="tableProperties.headBut" :headBut="tableProperties.headBut"/>

    <!-- table view -->
    <table-view
      :tableView="tableProperties.tableView"
      ref="tableOperationBut"
      @getPageTotal="getPageTotal"
    />

    <!-- 分页 -->
    <pageination
      :page-total="pageTotal"
      :pageSize="pageSize"
      @currentChange="currentChange"
      style="float: right;margin: 30px;"
    />

  </div>

</template>


<script>

  import Tab from './Tab'
  import SearchInput from './SearchInput'
  import TableOperationBut from './TableOperationBut'
  import TableView from './TableView'
  import Pageination from './Pageination'

  export default {
    name: '',
    components: {Tab, SearchInput, TableOperationBut, TableView, Pageination},
    props: {
      tableProperties: {
        type: Object,
        default: () => {
          return {
            data: [],
            tabs: {
              type: Object,
              default: () => {
                return {
                  defaultActiveName: 1,
                  tabPane: []
                }
              }
            },
            search: {
              type: Array,
              default: () => {
                return []
              }
            },
            headBut: {
              type: Array,
              default: () => {
                return []
              }
            }
          }
        }
      }
    },
    data() {
      return {
        pageTotal:0,
        pageSize:0,
      }
    },
    methods: {
      getTabsName(val) {
        this.$refs['tableOperationBut'].getTabsParam(val)
      },
      getSerachInputParam(val) {
        this.$refs['tableOperationBut'].getSerachInputParam(val)
      },
      getPageTotal(val,pageSize){
        this.pageTotal = val
        this.pageSize = pageSize
      },
      currentChange(val){
        this.$refs['tableOperationBut'].currentChange(val)
      },
    },
  }

</script>


<style>

</style>
